<template>
  <div class="course-container">
    <course-header :active="active"></course-header>
    <div class="course-content">
      <course-message v-if="showmessage" ref="coursemessage" @sendParams="getParams"></course-message>
      <offline-box v-else-if="showbox" ref="offlineBox" @offLineBoxParams="offLineBoxParams"></offline-box>
      <home-work v-else @homeWorkParams="homeWorkParams" ref="homeWork"></home-work>
    </div>
    <el-button @click="next" class="next" ref="elBotton">{{buttoninfo}}</el-button>
  </div>
</template>
<script>
import CourseHeader from "@/views/course/courseheader";
import CourseMessage from "@/views/course/coursemessage";
import OfflineBox from "@/views/course/offlinebox";
import HomeWork from "@/views/course/homework";
import {addCourseList} from '@/api/operation'
import {ERR_OK} from '@/api/config'
export default {
  data() {
    return {
      showmessage: true,
      showbox: false,
      active: 0,
      buttoninfo: "下一步",
      addCourseParams: {}
    };
  },
  methods: {
    // getContent(res) {
    //   console.log(res)
    // },
    homeWorkParams(params) {
      // console.log(params)
      Object.assign(this.addCourseParams, params)
    },
    offLineBoxParams(params) {
      // console.log(params)
      Object.assign(this.addCourseParams, params)
    },
    getParams(params) {
      // console.log(params)
      Object.assign(this.addCourseParams, params)
    },
    next() {
      if (this.active++ > 2) {
        addCourseList(this.addCourseParams)
          .then((res) => {
            if (res.code == ERR_OK) {
              // console.log(res)
            }
          })
          .catch((err) => {
            console.log(err)
          })
        // this.$router.push({ path: "/course/courselist" })
      }
      // this.$router.push({path: ''})
      
      if (this.active === 1) {
        // this.active === 0
        this.showmessage = false;
        this.showbox = true;
        this.$refs.coursemessage.formatParams()
      }
      if (this.active === 2) {
        this.showmessage = false;
        this.showbox = false;
        this.$refs.offlineBox.formatParams()
      }
      if (this.active === 3) {
        this.buttoninfo = "提交";
        this.$refs.homeWork.formatParams()
      }
      // console.log(this.active);
      // this.$router.push({path: '/course/index/addcourse/coursemessage'})
    }
  },
  components: {
    CourseHeader,
    CourseMessage,
    OfflineBox,
    HomeWork
  }
};
</script>
<style lang="scss" scoped>
.course-container{
  width: 100%;
  height: 100%;
  margin-bottom: 90px;
}
.course-content{
  width: 100%;
  height: 100%;
}
.next {
  width: 70px;
  height: 34px;
  line-height: 30px;
  border-radius: 6px;
  background-color: rgba(27, 166, 135, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
  color: #fff;
  padding: 0;
  position: absolute;
  right: 50px;
  bottom: 50px;
}
</style>